<template>
<view>
	<view class="tab-control">
		<view
			v-for="(item, index) in titles"
			class="tab-control-item"
			:key="index"
			:class="{ active: index === currentIndex }"
			@click="itemClick(index)"
		>
			<text>{{ item }}</text>
		</view>
	</view>
</view>
</template>

<script setup>
import { ref } from 'vue';
const emit = defineEmits(['tabClick']);
const props = defineProps({
	titles: {
		type: Array,
		default() {
			return [];
		}
	}
});
let currentIndex = ref(0);
const itemClick = index => {
	currentIndex.value = index;
	emit('tabClick', index);
};
</script>

<style scoped>
.tab-control {
	display: flex;
	text-align: center;
	font-size: 20rpx;
	height: 50px;
	line-height: 50px;
	background-color: #fff;
	box-sizing: border-box;
}

.tab-control-item {
	flex: 1;
}
.tab-control-item text {
	padding: 6px;
}
.active {
	color: red;
}
.active text {
	border-bottom: 3px solid pink;
}
</style>
